<template>
  <div class="material-preview">
    <div class="preview-content">
      <div class="preview-editable" :id="id" contenteditable="true"></div>
      <div class="preview-footer" v-if="isCopy">
        <div class="preview-footer-tiem" @click="copyContent()" v-if="isCopy">复制内容</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
  isPreview: {
    type: Boolean,
    default: true,
  },

  isCopy: {
    type: Boolean,
    default: false,
  },
});

const id = 'editable' + Date.now();

const innerHTML = (data) => {
  document.getElementById(id).innerHTML = data;
};

const copyContent = (content) => {
  // 1. 获取目标元素
  const targetElement = document.getElementById(id);

  // 2. 创建选区（Range）
  const range = document.createRange();
  range.selectNodeContents(targetElement);

  // 3. 将选区添加到 Selection 对象
  const selection = window.getSelection();
  selection.removeAllRanges(); // 清除现有选区
  selection.addRange(range);

  try {
    // 4. 复制内容到剪贴板（现代浏览器推荐 Clipboard API）
    if (navigator.clipboard) {
      navigator.clipboard.writeText(selection.toString()).then(() => {
        console.log('纯文本复制成功');

        // 如果需要复制 HTML 格式内容
        const htmlContent = content || targetElement.innerHTML;
        console.log(htmlContent, 'htmlContent');
        const blob = new Blob([htmlContent], { type: 'text/html' });
        // console.log(blob, 'blob');
        navigator.clipboard.write([new ClipboardItem({ 'text/html': blob })]);
        ElMessage.success('复制成功');
      });
    } else {
      // 旧浏览器回退到 execCommand
      document.execCommand('copy');
      console.log('内容已复制（旧浏览器方式）');

      console.log('targetElement.innerHTML', targetElement.innerHTML);
      ElMessage.success('内容已复制');
    }
  } catch (err) {
    console.error('复制失败:', err);
  }

  // 5. 清除选区（可选）
  // selection.removeAllRanges();
};

onMounted(() => {
  if (props.isPreview) {
    document.getElementById(id).addEventListener('copy', function (e) {
      e.preventDefault();
    });
  }
});

defineExpose({ innerHTML, copyContent });
</script>

<style lang="scss" scoped>
.material-preview {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 6px;
  box-sizing: border-box;
}

.preview-content {
  position: relative;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.mark {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
}

.preview-editable {
  width: 100%;
  position: relative;
  margin: 0 auto;
  padding: 12px;
  box-sizing: border-box;
  height: auto;
  border: none;
  outline: none;
}

.preview-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
  padding: 12px 12px 12px;
  box-sizing: border-box;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 99999;
  border-top: 1px solid #eee;
}

.preview-footer-tiem {
  flex: 1;
  height: 42px;
  text-align: center;
  font-size: 16px;
  border-radius: 50px;
  flex-shrink: 0;
  background: #fff;
  color: #4c3eba;
  border: 1px solid #4c3eba;
  font-weight: 600;
  margin: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
</style>

<style lang="scss">
// .preview-editable {
// }
// .preview-editable .text-temp-element p {
//   line-height: 1.2;
//   margin: 2px 0 !important;
//   // font-size: 12px;
// }

// .preview-editable .number-temp-element {
//   margin-top: 36px !important;
//   margin-bottom: 20px !important;
// }

// .preview-editable .number-temp-element p {
//   margin: 0 !important;
//   // line-height: 1.2;
// }
</style>
